@extends('layouts.main')

@section('content')
  
    <div class="choose_addr" style="margin-bottom:50px;">
        <div class="choose_addr_title btn btn-info span2">
            选择收货地址
        </div>
       
            <select name="" class="choose_addr_select span7 text-center">
                @foreach($address as $item)
                    <option value="{{$item->id}}">
                        {{$item->province ?? ''}}  {{$item->country ?? ''}}  {{$item->area ?? ''}}{{$item->details ?? ''}}
                        &nbsp;({{$item->user_name ?? ''}}收）&nbsp;联系电话：{{$item->tell ?? ''}}</option>
                @endforeach
            </select>
      <br>
        <div class="choose_addr_new">
            <button  class="btn btn-info span2"type="button" id="add-addr-view">添加新地址</button>
        </div>
    </div>
  
    <div class="addr">
        
        <form action="" id="addr-form">
            {{csrf_field()}}
   

                <dl class="form-item cf dl-horizontal">
                    <dt class=" form-item_title">
                        <span>收件人</span>
                    </dt>
                   <dd>
                        <input type="text" class="form-control span3" name="user_name">
                   </dd>
                </dl>
                <dl class="form-item cf dl-horizontal">
                    <dt class="form-item_title">
                        <span>选择区域</span>
                    </dt>
                    <dd style=" ">
                        <select name="province" class="addr-select">
                            <option value="">选择区域</option>
                        </select> <select name="country" id="" class="addr-select">
                            <option value="">选择区域</option>
                        </select> <select name="area" id="" class="addr-select">
                            <option value="">选择区域</option>
                        </select>
                    </dd>
                </dl>
                <dl class="form-item cf dl-horizontal">
                    <dt class="form-item_title">
                        <span>详细地址</span>
                    </dt>
                    <dd style=" ">
                        <textarea name="details" id="" class="span5"cols="30" rows="10"></textarea>
                    </dd>
                </dl>
                <dl class="form-item cf dl-horizontal">
                    <dt class="form-item_title">
                        <span>联系电话</span>
                    </dt>
                    <dd style=" ">
                        <input type="text"  class="span3"name="tell">
                    </dd>
                </dl>
                <dl class="form-item cf dl-horizontal">
                    <dt class="form-item_title">
                        <span>邮编</span>
                    </dt>
                    <dd style=" ">
                        <input type="text" class="span3"name="code">
                    </dd>
                </dl>
                <dl class="form-item cf dl-horizontal">
                    <dt class="form-item_title">
                        <span>&nbsp;</span>
                    </dt>
                    <dd style=" ">
                        <button type="button" class="addr-save btn btn-info">保存</button>
                        <button type="button" class="cancel-addr btn btn-info">取消</button>
                    </dd>
                </dl>
        
        </form>
    </div>
    
            
            <table class="table table-striped  text-center table-bordered table-hover table-condensed ">
    <thead>
    	<tr><th class="info">商品</th><th class="info">名称</th><th class="info">数量</th><th class="info">尺码颜色</th><th class="info">单价</th><th class="info">金额</th></tr>
    </thead>
        <form name="form1" method="post" action="" id="form-order">
            {{csrf_field()}}
                   
                @foreach($goodsMatch as $item)
                    <tr>
                        <input type="hidden" name="goods_match[{{$item->goods_match_id}}]" value="{{$item->num}}">
                       
                        <td style="border-top:1px #ccc solid " height="25" width="100" bgcolor="#FFFFFF">
                           
                                <img src="{{$item->pic ?? ''}}" width=90px height=120px>
                           
                        </td>
                        <td >
                           {{$item->name ?? ''}}
                        </td>
                        <td >
                            {{$item->num ?? ''}}
                         
                        </td>
                        <td >
                           {{$item->size ?? ''}}<br>{{$item->color ?? ''}}
                        </td>
                        <td>
                            {{$item->price ?? ''}}
                        </td>
                        
                        <td >
                            {{ bcmul($item->num ?? '',$item->price ?? '',2)}}
                        </td>
                    
                    </tr>
                @endforeach
            </table>
            <div>
                <input type="hidden" name="address_id" value="{{$address->first()->id ?? ''}}">
                <div class="alert alert-info span2" style="font-size:15px;"><strong>共计：{{$totalPrice}}元</strong></div>
                
                <div style="text-align: right;margin-top: 20px;">
                    <button type="button" class="btn btn-info" id="save-order">
                        提交订单
                    </button>
                    <button type="button" class="btn btn-info" id="cancel-order">
                        取消订单
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        function changeAddrSelect(id, name) {
            let html = ' <option value="a">选择区域</option>';
            let list = addr[id];
            for (let index in list) {
                html += '<option value="' + list[index] + '" data-id="' + index + '">' + list[index] + '</option>'
            }
            $('select[name=' + name + ']').html(html);
        }

        $(document).ready(function () {
            changeAddrSelect(0, 'province');
            $('.addr').hide();

            $('#ship_to_html').html($('.choose_addr_select').val());

            if ($('.choose_addr_select').find('option').length == 0) {
                $('.addr').show();
            }
        });
        $(document).on('change', 'select[name=province]', function () {
            let list = addr[0];
            for (let index in list) {
                if (list[index] === $(this).val()) {
                    changeAddrSelect(index, 'country');
                    changeAddrSelect('-1', 'area')
                }
            }

        });
        $(document).on('change', 'select[name=country]', function () {
            let name = $(this).val();
            $(this).find('option').each(function () {
                if ($(this).val() === name) {
                    changeAddrSelect($(this).data('id'), 'area');
                }
            })

        });
        $('.cancel-addr').click(function () {
            $('.addr').hide();
        });
        $('.addr-save').click(function () {
            $.post('{{route('address.store')}}', $('#addr-form').serializeArray(), function (res) {
                if (res.status === 1) {
                    alert('添加成功');
                }
                location.reload();

            })
        });

        $('#add-addr-view').click(function () {
            $('.addr').show();
        });

        $('.choose_addr_select').change(function () {
            $('input[name=address_id]').val($(this).val());
        });

        $('#save-order').click(function () {
            $.post('{{route('order.store')}}', $('#form-order').serializeArray(), function (res) {
                console.log(res);
                if (res.status !== 0) {
                    return alert(res.msg);
                }

                alert('提交成功');
                location.href = '{{route('order.index')}}';

            })
        });
        $('#cancel-order').click(function () {

            
            location.href = '{{route('cart.index')}}';
        });

    </script>
@endsection